<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-on</title>
</head>
<body>
	<div id="app">
		<input type="text" v-model="message" v-on:keyup.enter="changeData">
		<p v-on:click="click">v-on事件绑定</p>
		<ul>
			<li v-for="(v,k) in list">{{v.title}}</li>
		</ul>
		<input type="text" placeholder="直接写键值">
		<p v-on:click="callback(123,$event)">事件回调函数传参数</p>
	</div>
</body>
</html>
<script src="../2.1.8/vue.js"></script>
<script>
	// v-on 事件绑定
	// 形式：
	// 		v-on:eventType="callBack"
	// 		@eventType="callBack"
	// 事件修饰符
	// @eventType.modifier="callBack"
	// ( 1 ) .stop : 取消冒泡
	// ( 2 ) .enter : 回车键( keyCode = 13 )
	// ( 3 ) .prevent : 阻止默认事件
	// ( 4 ) .once : 只触发一次事件
	// ( 5 ) .capture : 
	// 	.space, .tab, .delete, .esc, .ctrl, .alt, .shift, .left, .right, .meta, .键值( keyCode )  

    // $event 事件对象 : 触发事件处理函数，如果执行了回调则需要传入特殊参数 $event, 用于接受事件对象

	// 事件修饰 

	let vm = new Vue({
		el : '#app',
		data : {
			message : 'hello world!',
			list : [
				{ title : 'a' }
			]
		},
		methods : {
			click( e ){
				console.log( this.message );
			},
			changeData(){
				this.list.push({
					title : this.message
				});
			},
			callback(a,b){
				console.log( a );
				console.log( b );
			},

		}
	});
</script>